//放大镜
//核心公式
//小图/大图=小区域/大区域
//小区域=(小图/大图)*大区域
$(window).on("load", () => {
  //得到小区域的宽高
  $(".smallArea").css({
    width:
      ($(".datu").width() / $(".bigImgbig").width()) * $(".bigArea").width(),
    height:
      ($(".datu").height() / $(".bigImgbig").height()) * $(".bigArea").height(),
  });
  //当鼠标进入大区域时,小区域和大区域显示
  $(".datu")
    .mouseenter(() => {
      $(".smallArea,.bigArea").show();
    })
    .mouseleave(() => {
      $(".smallArea,.bigArea").hide(); //隐藏
    })
    .mousemove((e) => {
      //获取点击的点到页面的距离
      var mX = e.pageX - $(".datu").offset().left - $(".smallArea").width() / 2;
      var mY = e.pageY - $(".datu").offset().top - $(".smallArea").height() / 2;
      // console.log(mX,mY);
      if (mY <= 0) {
        mY = 0;
      }
      if (mX <= 0) {
        mX = 0;
      }
      //小区域不能超出小图的宽
      if (mX > $(".datu").width() - $(".smallArea").width()) {
        mX = $(".datu").width() - $(".smallArea").width();
      }
      if (mY > $(".datu").height() - $(".smallArea").height()) {
        mY = $(".datu").height() - $(".smallArea").height();
      }
      //设置小区域的left 和top
      $(".smallArea").css({
        left: mX,
        top: mY,
      });
      //核心公式 大区域/小区域
      var hexin = $(".bigArea").width() / $(".smallArea").width();
      $(".bigImgbig").css({
        //大图反向移动
        left: hexin * -mX,
        top: hexin * -mY,
      });
    });
  //遍历循环小区域旁边的5张小图
  $(".fdjUl li").each((index, item) => {
    console.log(index);
    //绑定点击事件
    $(item).click(() => {
      $(".smallImg").attr("src", "./images/fdjtu" + (index + 1) + ".jpg");
      $(".bigImgbig").attr("src", "./images/fdjtu" + (index + 1) + ".jpg");
      $(item)
        .css("border", "solid 2px #c40000")
        .siblings()
        .css("border", "solid 2px #dfdfdf");
    });
    console.log(222);
  });
});

//飞入购物车
$(function () {
  var offset = $(".car").offset(); //结束的地方的元素
  $(".settlement").click(function (event) {
    var addcar = $(this);
    var img = $(".anlietu1").find("img").attr("src");
    var flyer = $('<img class="u-flyer" src="' + img + '">');
    console.log($(".shuliang").html());
    $(".shuliang").html("1");
    flyer.fly({
      start: {
        left: event.clientX,
        top: event.clientY,
      },
      end: {
        left: offset.left + 10,
        top: offset.top + 10,
        width: 0,
        height: 0,
      },
      onEnd: function () {
        $("#msg").show().animate({ width: "250px" }, 200).fadeOut(1000);
        addcar.css("cursor", "default").removeClass("orange").unbind("click");
        this.destory();
      },
    });
  });
});
$(function () {
  var id = location.search.split("?")[1].split('=')[1];
  $.get("/cart/getGoodsById", {
    id,
    headers: {
      token: localStorage.getItem("token"),
    },
  }).done(function (res) {
    let { data } = res;
    console.log(data);
    $(".pro-right h2").text(data.name);
    $(".main-price .price1").text(data.price);
    $(".jiangjia .ji").text(data.desc);
  });
});

//加减
$(function () {
  $(".quantity .spn-add").on("click", function () {
    var num = $(this).prev().text();
    num++;
    $(this).prev().text(num);
  });
});
$(function () {
  $(".quantity .spn-reduce").on("click", function () {
    var num = $(this).next().text();
    console.log(num);
    if (num <= 1) {
      return;
    }
    num--;
    $(this).next().text(num);
  });
});

//加入购物车
$(function () {
  
  $(".settlement").on("click", function () {
    var id = location.search.split("?")[1].split('=')[1];
    var name = $(".pro-right h2").text();
    var price = $(".main-price .price1").text();
    var oPrice = $(".jiangjia .ji").text();
    var number = $(".quantity i").text();
    console.log(number);
    var img = $(".fdjUl li img").attr("src");
    var uId = JSON.parse(sessionStorage.getItem("userInfo") || "").uId;
    console.log(uId);
    $.ajax({
      url: "/cart/add",
      type: "post",
      data: {
        id,
        name,
        price,
        oPrice,
        number,
        img,
        uId,
      },
      headers: {
        token: localStorage.getItem("token"),
      },
    }).then(function(res){
      console.log(res);
    })
  });
});

//懒加载
$(function () {
  $("img.lazy").lazyload({ effect: "fadeIn" });
});
